<template>
	<view class="my-container">
		<u-navbar bgColor="#262626" placeholder fixed height="90">
			<view class="u-nav-slot" slot="left">
				我的
			</view>
			<view class="u-nav-slot-right" slot="right">
				<u-icon @click="toSetting" size="20" :name="require('../../static/imgs/my-setting.png')" style="margin-right: 40rpx;">
				</u-icon>
				<u-icon size="20" :name="require('../../static/imgs/my-message.png')" @click="toMessage"></u-icon>
			</view>
		</u-navbar>
		<view class="my-card">
			<view class="card-header" @click="toMyInfo">
				<view class="hd-left">
					<u-avatar :src="src"></u-avatar>
					<text>{{userData.nickname}}</text>
				</view>
				<view class="hd-right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="card-footer">
				<navigator class="gz" url="./concern">
					关注{{followNum}}
				</navigator>
				<view class="fs">
					粉丝{{fanNum}}
				</view>
				<view class="xh">
					喜欢
				</view>
			</view>
		</view>
		<!-- 我的数据 -->
		<view class="my-data">
			<navigator class="data-item" url="./sport">
				<view class="data-header">
					<view class="hd-name">运动数据</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="data-content">
					<text>{{time}}</text>
					<text style="margin-left: 20rpx;">分钟</text>
				</view>
				<view class="data-desc">
					<text>本周消耗0千卡</text>
				</view>
			</navigator>
			<navigator class="data-item" url="./health">
				<view class="data-header">
					<view class="hd-name">健康数据</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="data-content">
					<image src="../../static/imgs/my-add.png"></image>
				</view>
				<view class="data-desc">
					<text>添加身体数据</text>
				</view>
			</navigator>
		</view>
		<!-- 我的收藏 -->
		<navigator class="my-collet" url="./collectCourse">
			<CommonNav name="我的收藏" :show="false"></CommonNav>
			<view class="collet-content">
				<image src="../../static/imgs/my-like.png"></image>
				<view class="collet-right">
					<view>我收藏的课程</view>
					<view style="font-size: 18rpx;margin-top: 10rpx;">{{colleData.length}}节课程</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import CommonNav from "@/components/CommonNav.vue"
	import {userInfo,collectList } from "@/api/my.js"
	export default {
		components:{
			CommonNav
		},
		data() {
			return {
				src: "../../static/imgs/user-avtar.png",
				userId:"",
				userData:{},
				// 粉丝数
				fanNum:"",
				// 关注数
				followNum:"",
				colleData:[],
				time:""
			}
		},
		methods: {
			toMessage(){
				uni.navigateTo({
					url:"/pages/my/message"
				})
			},
			toSetting(){
				uni.navigateTo({
					url:"/pages/my/setting"
				})
			},
			toMyInfo(){
				uni.navigateTo({
					url:"/pages/my/userCenter"
				})
			},
			getUserInfo(){
				userInfo(this.userId).then(res=>{
					this.userData=res.data.userInfo
					this.fanNum=res.data.fanNum
					this.followNum=res.data.followNum
				})
			},
			// 获取我收藏的课程
			getCollet(){
				collectList().then(res=>{
					this.colleData=res.data
				})
			}
		},
		onShow() {
			this.userId=uni.getStorageSync("userId")
			this.getUserInfo()
			this.getCollet()
			if(this.time)this.time=sessionStorage.getItem("time").slice(3,5)
		}
	}
</script>

<style lang="scss" scoped>
	.my-container {
		height: 100%;
		background-color: #262626;
		overflow-y: auto;
		padding: 0 60rpx;

		.u-nav-slot {
			font-size: 46rpx;
			font-weight: bold;
		}

		.u-nav-slot-right {
			display: flex;
			align-items: center;
		}

		.my-card {
			padding: 40rpx 60rpx;
			border-radius: 30rpx;
			border: 1px solid #000000;
			background: #000000;

			.card-header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.hd-left {
					display: flex;
					align-items: center;

					text {
						margin-left: 20rpx;
					}
				}
			}

			.card-footer {
				display: flex;
				align-items: center;
				margin-top: 60rpx;
				color: #6B6B6B;

				.fs {
					margin: 0 20rpx;
				}
			}
		}

		.my-data {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.data-item {
				width: 242rpx;
				height: 146rpx;
				border-radius: 30rpx;
				padding: 30rpx;
				border: 1px solid #000000;
				background: #000000;
				.data-header{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.data-content{
					margin-top: 20rpx;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
				.data-desc{
					font-size: 24rpx;
					margin-top: 20rpx;
					color: #FFFFFF;
				}
			}
		}
		.my-collet{
			margin-top: 40rpx;
			.collet-content{
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				image{
					width: 139rpx;
					height: 118rpx;
					margin-right: 40rpx;
				}
				.collet-right{
					
				}
			}
		}
	}
</style>
